<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容悦系统认证</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        body {
            background-color: #f5f5f5;
        }
        .container {
            max-width: 500px;
            padding: 15px;
        }
        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h2 {
            text-align: center;
            margin: 20px 0;
            color: #337ab7;
        }
        .btn-primary {
            background-color: #337ab7;
            width: 100%;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            display: none;
            border-radius: 4px;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>欢迎来进行容悦系统认证</h2>
        <div class="form-container">
            <form id="registerForm">
                <div class="form-group">
                    <label for="name">姓名:</label>
                    <input type="text" class="form-control" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="phone">电话号码:</label>
                    <input type="tel" class="form-control" id="phone" name="phone" pattern="^1\d{10}$" required>
                    <small class="form-text text-muted">请输入11位手机号码</small>
                </div>
                <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
            </form>
            <div id="result" class="result"></div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script>
        function submitForm() {
            var name = document.getElementById('name').value;
            var phone = document.getElementById('phone').value;
            var openid = wxOpenid || ''; // 使用从页面获取的openid
            
            if (!name || name.trim() === '') {
                showResult('请输入姓名', false);
                return;
            }
            
            if (!phone || !phone.match(/^1\d{10}$/)) {
                showResult('请输入正确的11位手机号码', false);
                return;
            }
            
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/wx/register', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status === 200) {
                        try {
                            var response = JSON.parse(xhr.responseText);
                            if (response.code === 200) {
                                showResult(response.msg || '提交成功！您的信息已记录。', true);
                            } else {
                                showResult(response.msg || '提交失败，请稍后重试', false);
                            }
                        } catch(e) {
                            showResult('提交成功！您的信息已记录。', true);
                        }
                    } else {
                        showResult('提交失败，请稍后重试', false);
                    }
                }
            };
            xhr.send(JSON.stringify({name: name, phone: phone, openid: openid}));
        }
        
        function showResult(message, isSuccess) {
            var resultDiv = document.getElementById('result');
            resultDiv.innerHTML = message;
            resultDiv.className = 'result ' + (isSuccess ? 'success' : 'error');
            resultDiv.style.display = 'block';
        }
    </script>
</body>
</html> 